<template>
    <el-popover
        placement="right"
        width="400"
        trigger="click">
        <div class="lottery-info">
            <p>抽奖ID: {{ lottery.id }}</p>
            <p v-for="(item, index) in options.status" :key="index"
               :label="item.label"
               v-if="item.value === lottery.status">状态: {{ item.label }}</p>
            <p>抽奖名称: {{ lottery.activity_name }}</p>
            <p>开奖方式: {{lottery.draw_method === 0 ? '定时开奖' : '人满开奖'}}</p>
            <p>是否隐藏: {{lottery.hide === 0 ? '否' : '是'}}</p>
            <p>需要看广告: {{lottery.need_ad === 0 ? '否' : '是'}}</p>
            <p>参与人数: {{lottery.drawings_count}}</p>
            <p>开奖时间: {{lottery.draw_at}}</p>
            <p>生效时间: {{lottery.active_at || '-'}}</p>
            <p><el-link class="pull-right" :href="'/admin#/lottery/detail/'+lottery_id" style="font-size: 12px">查看详情</el-link></p>
        </div>
        <el-link @click="showLottery" slot="reference" type="primary">
            {{activity_name ? activity_name : '抽奖id:' + lottery_id }}
        </el-link>
    </el-popover>

</template>

<script>
export default {
    name: "lottery-column",
    props: {
        lottery_id: {
            type: Number,
            required: true,
        },
        activity_name: {
            type: String,
            required: false,
        }
    },
    data: function () {
        return {
            hide: true,
            loading: false,
            lottery: {
                id: 0,
                status: 0,
                draw_method: '',
                hide: 0,
                need_ad: 0,
                drawings_count: 0,
                draw_at: 0,
                active_at: 0,
                // prizes:[{desc:''}],
                activity_name: '',
            },
            options:{
                status: this.$store.state.lottery.options.status,
            }
        }
    },
    methods: {
        showLottery() {
            this.hide = false
            if (this.lottery.id === 0) this.getLottery()
        },
        getLottery() {
            this.loading = true;
            this.$store.dispatch('lottery/Show', this.lottery_id).then(res => {
                this.lottery = res.data
                // console.log(this.lottery)
            }).finally(() => {
                this.loading = false
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.lottery-info {
    p {
        /*height: 30px;*/
        line-height: 30px;
        border-bottom: 1px solid #eee;
        font-size: 12px;
    }
}
</style>
